<template>
  <div>
    <headTop></headTop>
    <!-- <img  src="../../assets/image/hero-1-bg-img.png"/> -->
    <div class="banner_box">
      <div class="w">
        <div class="banner-content">
          <div class="fadeInDown animated">
            <div class="b-imags">
              <img src="../../assets/image/b1.png" style="margin-right: 26px;" />
              <img src="../../assets/image/ggplay.png" style='width: 40px;' />
            </div>
            <div class="b-top-txt" v-l='"GrowYour"'>

            </div>
            <div class="b-bottom-txt" v-l='"OurCore"'>
            </div>
            <div class="b-bottom-txt" v-l='"QualityMobile"'>

            </div>
            <a class="mybtn" style="margin-top: 26px;" href="/contact">

              <span v-l='"CONCATUS"'></span>
              <i class="el-icon-arrow-right"></i>
            </a>
          </div>
          <div class="shade-button-point ">
            <img src="../../assets/image/dn.png" style="width: 540px;" />
          </div>


        </div>



      </div>


    </div>





    <div class="theme-counter-section">
      <div class="overlay">
        <div class="w">
          <div class="overlay_title" v-l='"TrustedBy"'>

          </div>
          <div class="overlay_list">
            <div class="overlay_item">
              <img src="../../assets/image/dq.png" />
              <div class="overlay_t">
                <countTo :start-val="0" :end-val="124" :duration="2000" v-if="showNum"></countTo><span
                  v-else>0</span><span v-if="showNum">+</span>
              </div>
              <div class="overlay_b" v-l='"CountriesRegions"'></div>
            </div>
            <div class="overlay_item">
              <img src="../../assets/image/o2.png" />
              <div class="overlay_t">
                <countTo :start-val="0" :end-val="10000" :duration="2000" v-if="showNum"></countTo><span
                  v-else>0</span><span v-if="showNum">+</span>
              </div>
              <div class="overlay_b" v-l='"ActiveDevelopers"'></div>
            </div>
            <div class="overlay_item">
              <img src="../../assets/image/o1.png" />
              <div class="overlay_t">
                <countTo :start-val="0" :end-val="200" :duration="2000" v-if="showNum"></countTo><span
                  v-else>0</span>B<span v-if="showNum"></span>
              </div>
              <div class="overlay_b" v-l='"DailyAd"'></div>
            </div>
            <!--   <div class="overlay_item">
              <div class="overlay_img">
                <img src="../../assets/image/o3.png" />
              </div>
              <div class="overlay_t">
                <countTo :start-val="0" :end-val="98" :duration="2000" v-if="showNum"></countTo><span v-else>0</span>%
              </div>
              <div class="overlay_b">Rank Get</div>
            </div> -->


          </div>

        </div>
      </div>

    </div>

    <whatbox2></whatbox2>

    <question></question>



    <!--    <div class="w">
      <div class="promote  promote-org">
        <div class="promote-content">
          <div class="c_left">
            <div class="promote-title">
              <div class="normal">Get&nbsp;</div>
              <div class="one">50</div>
              <div class="two">%</div>
              <div class="normal">&nbsp;OFF on your first order</div>
            </div>
            <div class="promote-desc">
              We provide the 50% discount on first order, you can try it and see if they meet your expectations.
              <br />Just register and create order!
            </div>
             <div class="mybtn promotebtn" style="margin-top: 30px;background-color: #fff;" @click="$router.push('/contact')">
                GET INSTALL <i class="el-icon-arrow-right"></i>
              </div>
          </div>

          <div class="c_right flex-grow giftzy ">
            <img src="../../assets/image/gift.png"  />

          </div>

        </div>
      </div>



     <div class="promote">
        <div class="promote-content">
          <div class="c_left">
            <div class="promote-title">
              <div class="normal">Get&nbsp;</div>
              <div class="one">50</div>
              <div class="two">%</div>
              <div class="normal">&nbsp;OFF on your first order</div>
            </div>
            <div class="promote-desc">
              We provide the 50% discount on first order, you can try it and see if they meet your expectations.
              <br />Just register and create order!
            </div>
          </div>

          <div class="c_right flex-grow ">

            <div class="mybtn promotebtn" style="margin-top: 60px;">
              GET INSTALL <i class="el-icon-arrow-right"></i>
            </div>
          </div>

        </div>
      </div>
    </div> -->

    <div style="height: 100px;"></div>

    <footerBottom></footerBottom>



  </div>



</template>

<script>
  import headTop from '../common/head.vue';
  import footerBottom from '../common/footer.vue';
  import countTo from 'vue-count-to'
  import whatbox from './what';
  import whatbox2 from './what2';
  import question from './question';



  export default {
    name: 'Index',

    components: {
      whatbox2,
      question,
      whatbox,
      countTo,
      footerBottom,
      headTop
    },
    data() {
      return {
        showNum: false,
        shownav: false
      }
    },
    mounted() {
      let this_ = this;
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {

      handleScroll() {
        let this_ = this;
        if (window.scrollY >= 175) {
          this_.showNum = true;
        }
      }
    },
    beforeDestroy() {
      // 移除滚动事件监听
      window.removeEventListener('scroll', this.handleScroll);
    },




  }
</script>

<style>
</style>
